<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>练手的项目</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/display.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common.css"/>
<script src="__PUBLIC__/js/jquery.js"></script>
<script src="__PUBLIC__/js/angular.min.js"></script>
<script src="__PUBLIC__/js/messager.js"></script>

<!--[if lt IE 9]>
<script src="__PUBLIC__/js/html5shiv.js"></script>
<script src="__PUBLIC__/js/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app = "myApp" ng-controller = "myCtrl" ng-cloak  ng-init = "menuList = false">
<div class = "header">
    <div class = "row">
        <div class = "col-xs-3"><a onclick="javascript:history.back(-1);return false;"><i class="fa fa-arrow-circle-o-left" style = "font-size:1.8em;"></i></a></div>
        <div class = "col-xs-6 text-center"><a href = "{:url('index/index/index')}">练手的项目</a></div>
        <div class = "col-xs-3" ng-click = "menuList = !menuList"><i class="fa fa-bars pull-right"></i></div>
    </div>
</div>
<!--反馈-->
<div style = "position: fixed;top:18em;z-index:10;right:0;">
    <a class = "btn btn-warning" href = "{:url('index/index/fankui')}">反馈</a>
</div>
<!--遮罩-->
<div class = "zhezhao" ng-show = "menuList"></div>
<style>
    /*轮播*/
    .swiper-container {
        width: 100%;
        height: 13em;
        /*border:1px solid;*/
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    /*分页*/
    .pagination{
        display:block;
        padding-left:10em;
    }
    /*遮罩*/
    .zhezhao{
        width:100%;
        height: 100%;
        opacity: .75;
        background: #000;
        position: fixed;
        top:3.2em;
        z-index:3;
    }
    .header a{
        color:#888;
        text-decoration: none;
    }
    /*分割线*/
    .menuList{
        width: 100%;
        height: 100%;
        position: fixed;
        top:3.2em;
        z-index:10;
        color:#888;
    }
    .menuList .row{
        background: #fff;
        border-bottom:.5em solid #ddd;
    }
    .menuList .row:last-child{
        border:none;
    }
    .menuList .row .text-center {
        border-bottom: 1px solid #999;
        width: 80%;
        margin-left: 10%;
        padding: .5em;
    }
    .menuList span{
        position: absolute;
        right: .5em;
    }
    .menuList .childs div{
        padding: .5em;
        text-align: center;
        border-bottom: 1px dashed #bbb;
        width: 80%;
        margin-left: 10%;
    }
    .menuList .childs div:last-child{
        border: none;
    }
    .menuList a{
        color:#888;
        text-decoration:none;
    }
    .menuList .sahnchu{
        font-size: 2em;
        color: #fff;
        position: relative;
        top: 2em;
    }
    /*页脚*/
    .footer{
        z-index:100;
    }
</style>
<div class = "menuList" ng-show="menuList">
    <div class="row" ng-repeat = 'data in datas'>
        <div class="text-center" ng-click = "toggleMenu(data)">{{data.name}}<span><i ng-class="{'fa fa-plus': !data.state, 'fa fa-minus': data.state}"></i></span></div>
        <div class = "childs" ng-if="!isLeaf(data)" ng-show="data.state">
            <div ng-repeat = 'list in data.child' ng-click = "tiao(list.href)">{{list.name}}</div>
        </div>
    </div>
    <div class = "col-xs-12 text-center sahnchu" ng-click = "menuList = !menuList"><i class = "fa fa-times-circle"></i></div>
</div>
<script>
    var BASE_URL = "{:config('base_url')}",app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope){
        $scope.datas = [{name: '主页', child: [{name: '用户首页',href:"{:url('index/index/index')}"},{name: '会员列表',href:"{:url('index/index/memlist')}"}],state:false},
            {name: '登陆/注册', child: [{name: '登陆',href:"{:url('index/index/login')}"},{name: '注册',href:"{:url('index/index/register')}"},{name: '密码重置',href:"{:url('index/index/resetPassword')}"}],state:true},
            {name: '个人中心', child: [{name: '操作中心',href:"{:url('index/oneself/index')}"},{name: '编辑个人资料',href:"{:url('index/index/register02',array('panduan'=>'1'))}"}/*,{name: '联系人',href:'#'},{name: '我的礼物',href:'#'}*/],state:false},
            {name: '更多', child: [{name: '同城活动',href:'#'},/*{name: '房屋交易（+租赁）',href:'#'}*/],state:false},
            {name: '操作', child: [{name: '退出',href:"{:url('index/index/loginOut')}"},{name: '反馈（+投诉）',href:"{:url('index/index/fankui')}"}],state:false}];
        $scope.isLeaf = function(item){
            return !item.child || !item.child.length;
        }
        $scope.toggleMenu = function(list){
            if(false == list.state){
                angular.forEach($scope.datas,function(data){
                    data.name == list.name? (data.state = !data.state) : (data.state = false);
                })
            }else{
                list.state = false;
            }
        }
        $scope.tiao = function(href){
            if('#' == href){
                alert("尚未开通！");
            }
            window.location = href;
        }
    });
    var tiao = function(href){
        window.onload = href;
    }
</script>
